<script lang="ts">
export default {
  name: 'engineer',
};
</script>
<script setup lang="ts">
import {
  reactive,
  ref,
  onMounted,
  toRefs,
} from 'vue';

import {
  ElForm,
} from 'element-plus';

import {
  Search,
  Refresh,
} from '@element-plus/icons-vue';
import {
  engineerReport
} from '@/api/engineer';
import { EngineerQuery, EngineerType } from '@/api/engineer/types';
import EngineerOrderList from "@/views/statement/engineerOrderList.vue";
import EngineerWithdrawList from "@/views/statement/engineerWithdrawList.vue";
import EngineerInviteList from "@/views/statement/engineerInviteList.vue";

const queryFormRef = ref(ElForm); // 查询表单
const engineerOrderListRef = ref();
const engineerWithdrawListRef = ref()
const engineerInviteListRef = ref()
const state = reactive({
  // 遮罩层
  loading: false,
  // 选中数组
  ids: [] as number[],
  time:[] as string[],
  // 总条数
  total: 0,
  engineerList: [] as EngineerType[],
  dialog: {
    visible: false,
  } as DialogType,
  formData: {} as EngineerType,
  serviceTypeOptions: [] as OptionType[],
  serviceTypeLabelOptions: [] as OptionType[],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  } as unknown as EngineerQuery,
  rules: {
    engineerRealname: [
      { required: true, message: '请输入真实姓名', trigger: 'blur' },
    ],
    engineerSex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
    typeIds: { required: true, message: '请选择服务类型', trigger: 'blur' },
    idcard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
    phone: [
      { required: true, message: '请输入手机号码', trigger: 'blur' },
      {
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur',
      },
    ],
  },
});

let {
  loading,
  queryParams,
  engineerList,
  total,
  time
} = toRefs(state);

/**
 * 查询
 */
function handleQuery() {
  loading.value = true;

  engineerReport(state.queryParams).then(({ data }) => {
    state.engineerList = data.list;
    state.total = data.total;
    state.loading = false;
  });
}
function changeTime(e: string []){

  if (e && e.length) {
    state.queryParams.startTime = e[0]
    state.queryParams.endTime = e[1]
  }else{
    state.queryParams.startTime = undefined
    state.queryParams.endTime = undefined
  }
}
/**
 * 重置查询
 */
function resetQuery() {

  queryFormRef.value.resetFields();
  handleQuery();
}

/**
 * 详情
 */
function getEngineerOrderList(row: any) {
  console.log("row", row.engineerId)
  engineerOrderListRef.value.open(row.engineerId);
}

function getEngineerWithdrawList(row: any) {
  console.log("row", row.engineerId)
  engineerWithdrawListRef.value.open(row.engineerId);
}
function getEngineerInviteList(row: any) {
  console.log("row", row.engineerId)
  engineerInviteListRef.value.open(row.engineerId);
}

onMounted(() => {
  handleQuery();
});
</script>
<template>
  <div class="app-container">
    <div class="search">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="用户名称">
          <el-input v-model="queryParams.engineerName" placeholder="请输入姓名进行搜索" clearable @keyup.enter="handleQuery" style="width: 200px" />
        </el-form-item>
        <el-form-item label="用户手机号">
          <el-input v-model="queryParams.phone" placeholder="请输入姓名进行搜索" clearable @keyup.enter="handleQuery" style="width: 200px" />
        </el-form-item>
        <el-form-item prop="phone" label="结算时间">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            @change="changeTime"
            date-format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card>
      <template #header>
      </template>

      <el-table ref="dataTableRef" v-loading="loading" :data="engineerList" highlight-current-row border>
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column type="index" width="55" align="center" />
        <el-table-column label="用户名称" align="center" prop="engineerName"  >
          <template #default="scope">
            <span @click="getEngineerOrderList(scope.row)" style="cursor: pointer;color: #409eff">{{
                scope.row.engineerName
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户手机号" align="center" prop="phone"  />
        <el-table-column label="订单收入" align="center" prop="orderMoney"  />
        <el-table-column label="邀请奖励" align="center" prop="inviteRewards">
          <template #default="scope">
            <span @click="getEngineerInviteList(scope.row)" style="cursor: pointer;color: #409eff">{{
                scope.row.inviteRewards
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="提现金额" align="center" prop="withdrawalmount" >
          <template #default="scope">
            <span @click="getEngineerWithdrawList(scope.row)" style="cursor: pointer;color: #409eff">{{
                scope.row.withdrawalmount
              }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- pagination -->
      <pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </el-card>

    <engineerOrderList ref="engineerOrderListRef"></engineerOrderList>
    <engineerWithdrawList ref="engineerWithdrawListRef"></engineerWithdrawList>
    <engineerInviteList ref="engineerInviteListRef"></engineerInviteList>

  </div>
</template>


<style scoped>
</style>
